<template>
    <div class="app-content">
        <el-card class="search-card" shadow="never">
            <!-- 搜索部分 -->
            <el-row :gutter="10" class="search-section">
                <el-col :span="7">
                    <el-form-item label="所属租户：">
                        <el-select v-model="searchData.tenantIdList" multiple filterable clearable placeholder="选择租户"
                            style="width: 240px">
                            <el-option v-for="tenant in allDeptInfo" :key="tenant" :label="tenant.tenantName"
                                :value="tenant.tenantId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="项目名称：" style="width: 240px">
                        <el-input v-model="searchData.projectname" placeholder="请输入项目名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="状态" style="width: 240px">
                        <el-select v-model="searchData.status" placeholder="请选择状态">
                            <el-option label="未评审" value="0"></el-option>
                            <el-option label="评审中" value="1"></el-option>
                            <el-option label="已通过" value="2"></el-option>
                            <el-option label="未通过" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="search-section2">
                <el-col :span="9">
                    <el-form-item label="创建时间：">
                        <div class="block">
                            <el-date-picker v-model="searchData.createTimeList" type="daterange" unlink-panels
                                range-separator=">>" start-placeholder="开始日期" end-placeholder="结束日期"
                                :shortcuts="shortcuts" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary" class="action-button" @click="search" :icon="Search">搜索</el-button>
                    <el-button @click="reset" type="primary" class="action-button" :icon="Refresh">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="search-card" shadow="never" style="margin-top: 10px;">
            <!-- 操作按钮组 -->
            <div class="button-group">
                <el-button class="action-button" type="primary" :icon="Edit" @click="handleAdd">增加</el-button>

                <el-button class="action-button" type="primary" :icon="Upload" @click="handleImport">导入</el-button>
                <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none"
                    accept=".xlsx,.xls,.csv" />
                <el-button class="action-button" type="primary" :icon="Download" @click="handleExport">导出</el-button>
                <el-button class="action-button" type="primary" :icon="Delete" :disabled="!hasSelected"
                    @click="handleBatchDelete" plain>
                    删除
                </el-button>
            </div>


            <!-- 数据表格 -->
            <el-table ref="tableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <!-- 多选框列 -->
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="projectName" label="项目名" width="140" />
                <el-table-column prop="tenantId" label="所属租户" width="140" />
                <el-table-column prop="projectStatus" label="项目状态" width="120">
                    <template #default="scope">
                        <span>
                            {{ scope.row.projectStatus === "0" ? '未评审' : scope.row.projectStatus === "1" ? '评审中' :
                                scope.row.projectStatus === "2" ? '已通过' : '暂无信息' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="180">
                    <template #default="scope">
                        {{
                            scope.row.startTime
                                ? (typeof scope.row.startTime === 'string'
                                    ? scope.row.startTime.replace(/T/, ' ')
                                    : new Date(scope.row.startTime).toLocaleString())
                                : '暂无信息'
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="dueDate" label="结束时间" width="180">
                    <template #default="scope">
                        {{
                            scope.row.dueDate
                                ? (typeof scope.row.dueDate === 'string'
                                    ? scope.row.dueDate.replace(/T/, ' ')
                                    : new Date(scope.row.dueDate).toLocaleString())
                                : '暂无信息'
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="cost" label="预计成本" />
                <el-table-column prop="remark" label="备注" v-slot="{ row }">
                    <div class="remark-ellipsis">
                        {{ row.remark }}
                    </div>
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column label="操作" width="210">
                    <template #default="scope">
                        <el-button class="table-button" text type="primary" :icon="EditPen"
                            @click="handleEdit(scope.$index, scope.row)">
                            编辑</el-button>
                        <el-button class="table-button" text type="danger" :icon="Delete"
                            @click="handleRowDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination class="pagination-fixed" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                    :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pagination.totalNum">

                </el-pagination>
            </div>
        </el-card>
        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600" :before-close="handleClose" @open="onOpen"
            @close="onClose" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
            <el-segmented v-model="segmentValue" :options="menuoOptions" size="large" />

            <template #footer>
                <div class="dialog-footer">
                    <el-button class="action-button" type="info" @click="dialogVisible = false">取消</el-button>
                    <el-button class="action-button" type="primary" @click="update()">
                        确认
                    </el-button>
                </div>
            </template>
            <div v-show="segmentValue === 'basic'">
                <el-form ref="dialogForm" style="max-width: 600px; margin-left: 30px;" :model="projectForm"
                    :rules="rules" label-width="auto" class="el-form" status-icon>
                    <el-form-item label="项目名" prop="projectName" required v-show="dialogType == true">
                        <el-input v-model="projectForm.projectName" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="所属租户" prop="tenantId" required>
                        <el-select v-model="projectForm.tenantId" filterable clearable placeholder="选择租户"
                            style="width: 200px">
                            <el-option v-for="tenant in allDeptInfo" :key="tenant" :label="tenant.tenantName"
                                :value="tenant.tenantId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目状态" prop="projectStatus">
                        <el-radio-group v-model="projectForm.projectStatus" style="width: 300px;">
                            <el-radio value="0">未评估</el-radio>
                            <el-radio value="1">评估中</el-radio>
                            <el-radio value="2">已完成</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="项目开始时间" prop="startTime" required>
                        <div class="block">
                            <el-date-picker v-model="projectForm.startTime" type="date" start-placeholder="开始日期"
                                :shortcuts="shortcuts" style="width: 200px" />
                        </div>
                    </el-form-item>
                    <el-form-item label="项目结束时间" prop="dueDate" required>
                        <div class="block">
                            <el-date-picker v-model="projectForm.dueDate" type="date" start-placeholder="结束日期"
                                :shortcuts="shortcuts" style="width: 200px" />
                        </div>
                    </el-form-item>
                    <el-form-item label="项目预算" prop="cost" required>
                        <el-input v-model="projectForm.cost" style="width: 200px;" />
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="projectForm.remark" :rows="4" :autosize="true"
                            style="width: 400px;" />
                    </el-form-item>
                </el-form>
            </div>
            <!-- 新增 dialogType是true-->
            <div v-if="segmentValue === 'assign'">
                <!-- 用户列表展示区域，按角色分组 -->
                <el-form-item label="参与者" style="margin-left: 30px;">
                    <UserSelector :roles="rolesData" :availableUsers="availableUsersData"
                        v-model:selectedUsers="selectedUsers" :multiple="true" @remove-user="handleRemoveUser" />
                </el-form-item>
                <el-form-item label="邀请角色" prop="inviteRole" style="margin-left: 30px;">
                    <el-radio-group v-model="inviteRole" style="width: 300px;">
                        <el-radio value="2">租户管理员</el-radio>
                        <el-radio value="3">评估师</el-radio>
                        <el-radio value="4">审核员</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div v-if="segmentValue === 'file'">
                <el-upload class="uploadFile" :http-request="customUpload" accept=".pdf" :file-list="[]" :limit="1">
                    <el-button type="primary" plain style="margin-left: 10px;">上传 PDF 文件</el-button>
                </el-upload>
                <!-- 文件列表展示 -->
                <el-table :data="fileList" style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="name" label="文件名称"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" @click="openPreview(scope.row)">预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 文件预览对话框 -->
                <el-dialog v-model="fileDialogVisible" width="80%" title="PDF 文件预览">
                    <div style="height: calc(100vh - 150px); overflow: auto;">
                        <PdfViewer v-if="currentFile.url" :file-url="currentFile.url"
                            style="width: 100%; height: 100%;" />
                    </div>

                </el-dialog>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, reactive } from 'vue'
import type { Project, ProjectDTOs } from '../../type/Project';
import type { PaginationData } from '../../type/PaginationData';
import { ElMessage, ElMessageBox, FormInstance, FormRules, UploadRequestOptions } from 'element-plus';
import { Delete, Edit, Search, Upload, Download, Refresh, EditPen } from '@element-plus/icons-vue'
import { getProjectInfo, deleteBatchProject, deleteProject, importProjectInfo, exportProjectInfo, updateProject, addProject, searchProjectInfo, findUserByTenantId, findUserByProjectId, inviteUser, removeUser } from '../../api/Tenant/projectApi';
import { getAllTenantInfo, findById } from '../../api/Tenant/tenantApi';
import { Tenant } from '../../type/Tenant';
import { User } from '../../type/User';
import { Role } from '../../type/Role';
import UserSelector from '../../components/Tenant/UserSelector.vue';
import { uploadPicture } from '../../api/Tenant/uploadApi';
import PdfViewer from '../../components/Tenant/PdfViewer.vue';

//-----------------------------------
// 按角色分组的用户数据
const rolesData = ref<Role[]>([])

// 可选择的用户数据
const availableUsersData = ref<User[]>([])

// 已选择的用户列表
const selectedUsers = ref<User[]>([])

const inviteRole = ref<string>('0')
    const handleRemoveUser = async (obj: any) => {
    try {
        // 执行异步操作，移除用户
        const res = await removeUser(obj.user, projectForm.value, obj.role);
        
        if (res.code === 1) {
            // 获取到对应roleId的角色对象
            const role = rolesData.value.find(role => role.roleId === obj.role.roleId);
            if (role) {
                // 移除指定userId的用户
                role.users = role.users?.filter((user: any) => user.userId !== obj.user.userId);
                
                // 更新状态或执行其他操作
                ElMessage.success('移除成功');
            } else {
                ElMessage.error('未找到该角色');
            }
        } else {
            ElMessage.error('移除失败');
        }
    } catch (error) {
        ElMessage.error('发生错误');
        console.error(error);
    }
}

//-----------------------------------
// 表格数据
const tableData = ref<Project[]>([]);
//查询数据
const searchData = ref({
    projectname: "",
    status: "",
    createTimeList: [],
    tenantIdList: []
});


//分页
const pagination = ref<PaginationData<Project>>({
    currentPage: 1,
    pageSize: 10,
    totalNum: 10,
    isMore: 0,
    totalPage: 0,
    startIndex: 0,
    items: []
});
//当每页条数发生了变化，调用此函数
const handleSizeChange = async (val: number) => {
    pagination.value.pageSize = val;
    pagination.value.currentPage = 1; // 切换每页条数时重置为第一页
    await getProjectData();
};
//当前页码发生变化，调用此函数
const handleCurrentChange = async (val: number) => {
    pagination.value.currentPage = val;
    await getProjectData();
};

// ---------------------
// 获取项目数据
const getProjectData = async () => {

    const res = await getProjectInfo(pagination.value?.currentPage, pagination.value?.pageSize);
    //console.log('获取到的数据:', res);
    const data = res;

    // 更新表格数据
    tableData.value = data.items;

    // 更新分页信息
    pagination.value.currentPage = data.currentPage;
    pagination.value.pageSize = data.pageSize;
    pagination.value.totalNum = data.totalNum;
    pagination.value.isMore = data.isMore;
    pagination.value.totalPage = data.totalPage;
    pagination.value.startIndex = data.startIndex;

}
getProjectData();

const allDeptInfo = ref<Tenant[]>()

//获取租户数据
const getTenantData = async () => {
    const res = await getAllTenantInfo();
    allDeptInfo.value = res;
}
getTenantData()


//日期选择器
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]


//------------搜索----------------
const search = async () => {

    const res = await searchProjectInfo(pagination.value.currentPage, pagination.value.pageSize, searchData.value);

    // 更新表格数据
    tableData.value = res.items;

    // 更新分页信息
    pagination.value.currentPage = res.currentPage;
    pagination.value.pageSize = res.pageSize;
    pagination.value.totalNum = res.totalNum;
    pagination.value.isMore = res.isMore;
    pagination.value.totalPage = res.totalPage;
    pagination.value.startIndex = res.startIndex;
}
const reset = async () => {
    searchData.value.projectname = "";
    searchData.value.status = "";
    searchData.value.createTimeList = [];
    searchData.value.tenantIdList = [];
    await getProjectData();
}

// 处理顶部按钮操作
const handleAdd = async () => {
    dialogTitle.value = '新增项目'
   
    // 重置表单
    projectForm.value = {}
    selectedUsers.value = []
    rolesData.value = []
    fileList.value = []
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
           
    }, 100)
    dialogType.value = true
    dialogVisible.value = true
}


//----------导入部分--------
const fileInput = ref<HTMLInputElement | null>(null);

// 触发文件输入
function handleImport() {
    fileInput.value?.click();
}
const handleFileUpload = async (event: Event) => {

    // 在此添加导入操作的逻辑
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        await importProjectInfo(formData)
        await getProjectData();
    }
}

const handleExport = async () => {

    // 在此添加导出操作的逻辑
    await exportProjectInfo();
}

//------------------
// 管理选中行
const tableRef = ref<InstanceType<typeof import('element-plus')['ElTable']> | null>(null);
const selectedRows = ref<Project[]>([]);

// 监听选中行变化
const handleSelectionChange = (selection: Project[]) => {
    selectedRows.value = selection;
};

// 计算是否有选中行
const hasSelected = computed(() => selectedRows.value.length > 0);

// 批量删除处理函数
const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) return;

    ElMessageBox.confirm(
        `确定删除选中的 ${selectedRows.value.length} 条数据吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            tableData.value = tableData.value.filter(
                (row) => !selectedRows.value.includes(row)
            );
            //console.log('selectedRows.value', selectedRows.value)
            const ids: string[] = selectedRows.value.map((row) => row.projectId as string);  // 类型断言，确保返回的都是 string 类型
            await deleteBatchProject(ids)
            ElMessage.success('批量删除成功');
            selectedRows.value = [];
            await getProjectData();
        })
        .catch(() => {
            ElMessage.info('已取消批量删除');
        });
};
//------------对话框----------------
const dialogVisible = ref(false)
// 在编辑的时候不可以选择租户dialogType:false，新增的时候可以选择租户 dialogType:true
const dialogType = ref(true)
const emit = defineEmits(['dialogUpdated']);
const onOpen = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const onClose = () => {
    emit('dialogUpdated', dialogVisible.value)
}
const dialogTitle = ref('')
const handleClose = (done: () => void) => {
    selectedUsers.value = []
    availableUsersData.value = []
    inviteRole.value = '0'
    fileList.value = []
    dialogVisible.value = false
    // 重置验证规则，避免触发验证 需要用setTimeout包裹
    setTimeout(() => {
        dialogForm.value?.clearValidate()
    }, 100)
    done()
}
const segmentValue = ref('basic')

const menuoOptions = [
    {
        label: '基础信息',
        value: 'basic',
    },
    {
        label: '参与人员',
        value: 'assign',
    },
    {
        label: '项目文件',
        value: 'file',
    }
]
//
const dialogForm = ref<FormInstance>()
const projectForm = ref<ProjectDTOs>({})
const rules = reactive<FormRules<ProjectDTOs>>({
    projectName: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
    ],
    tenantId: [
        { required: true, message: '请选择项目租户', trigger: 'blur' },
    ],
    projectStatus: [
        { required: true, message: '请选择项目状态', trigger: 'blur' },
    ],
    startTime: [
        { required: true, message: '请输入项目开始时间', trigger: 'blur' },
    ],
    dueDate: [
        { required: false, message: '请输入项目结束时间', trigger: 'blur' },
    ],
    cost: [
        { required: true, message: '请输入项目预算', trigger: 'blur' },
    ],
    remark: [
        { required: false, message: '补充', trigger: 'blur' },
    ]
});

watch(
    () => projectForm.value.tenantId,
    async () => {
        availableUsersData.value = await findUserByTenantId(projectForm.value || "")

    }
);
// 编辑行的处理函数
const handleEdit = async (index: number, row: Project) => {
    // 编辑逻辑
    dialogTitle.value = '编辑用户'
    dialogType.value = false
    dialogVisible.value = true

    projectForm.value = row
    if (row.url) {
        currentFile.value.url = row.url
        currentFile.value.name = row.projectName + '.pdf'
        fileList.value = [{
            name: row.projectName + '.pdf',
            url: row.url,
            type: 'application/pdf',
            uid: '1',
            status: 'success'
        }]

    }

    const tenant = await findById(row.tenantId || "");
    if (tenant) {
        projectForm.value.tenantName = tenant.tenantName;
        //console.log('tenant', tenant)
    }
    availableUsersData.value = await findUserByTenantId(row || "")
    const res = await findUserByProjectId(row.projectId || "")
    rolesData.value = res.roles || []
    selectedUsers.value = []

};
const update = async () => {
    // 更新逻辑

    const valid = await dialogForm.value?.validate();
    if (valid) {
        if (dialogType.value === false) {
            // 更新逻辑
            await updateProject(projectForm.value);
            if (selectedUsers.value.length > 0) {
                if (inviteRole.value == '0') {
                    ElMessage.error('请选择邀请角色');
                    return;
                }
                await inviteUser(selectedUsers.value, projectForm.value, inviteRole.value)

            }
            ElMessage.success('更新成功');

        } else {
            // 新增逻辑
            if (!projectForm.value.projectName) {
                ElMessage.error('请选择租户');
                return;
            }

            if (selectedUsers.value.length > 0) {
                if (inviteRole.value == '0') {
                    ElMessage.error('请选择邀请角色');
                    return;
                }
                const res = await inviteUser(selectedUsers.value, projectForm.value, inviteRole.value)
                projectForm.value.projectId = res
                if (projectForm.value.projectId) {
                    await addProject(projectForm.value);
                    ElMessage.success('新增成功');
                } else {
                    ElMessage.error('新增失败');
                }
            } else {
                await updateProject(projectForm.value);
                ElMessage.success('新增成功');
            }
        }

        dialogVisible.value = false;
        availableUsersData.value = []
        selectedUsers.value = []
        inviteRole.value = '0'
        await getProjectData();
    } else {
        // 验证失败的情况下，显示错误信息
        ElMessage.error('请检查输入项');
    }


}

// 删除行的处理函数
const handleRowDelete = (index: number, row: Project) => {

    ElMessageBox.confirm(`确定删除 ${row.projectName} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            tableData.value.splice(index, 1);
            await deleteProject(row)
            ElMessage.success('删除成功');
            await getProjectData();
        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });
};

// 文件上传相关
interface FileItem {
    name: string;
    url?: string; // 可选，因为上传时还未有 URL
    type?: string;
    uid: string; // 保证文件唯一性
    status?: string;
    [key: string]: any; // 允许其他属性
}

const fileList = ref<FileItem[]>([]);
const fileDialogVisible = ref(false);
const currentFile = ref<FileItem>({
    name: '',
    url: '',
    type: '',
    uid: '',
    status: ''
});
// 打开预览对话框
const openPreview = (file: FileItem) => {
    currentFile.value = file;
    fileDialogVisible.value = true;
};


// 自定义上传方法
const customUpload = async (options: UploadRequestOptions) => {
    const formData = new FormData();
    formData.append('file', options.file as File);

    try {
        const url = await uploadPicture(formData);
        projectForm.value.url = url;
        ElMessage.success('上传成功');

        // 更新 fileList
        fileList.value = [{
            name: (options.file as File).name,
            url: url, // 后端返回的文件访问 URL
            type: (options.file as File).type,
            uid: (options.file as any).uid || Date.now().toString(), // 确保唯一性
            status: 'success',
        }];
        console.log('fileList:', fileList.value);
        console.log('fileList:', fileList.value[0].url);
        // 调用 onSuccess 回调，传递 URL
        options.onSuccess(url);
    } catch (error: any) {
        // 显示上传失败的消息
        ElMessage.error(error.message || '上传失败!');
        // 调用 onError 回调，传递错误对象
        options.onError(error);
    }
};
</script>
<style lang="scss" scoped>
@use "sass:color";
$primary-color: #6067eb;
$info-color: #dadcf6;
$button-border-radius: 4px;
$button-padding: 0.5rem 1rem;
$button-font-size: 16px;
$color-hover: color.adjust($primary-color, $lightness: -10%); // 悬浮时的颜色
$color-disabled: color.adjust($primary-color, $lightness: 15%); // 禁用时的颜色
$info-color-hover: color.adjust($info-color, $lightness: -25%); // 悬浮时的颜色

/* 定义一个 mixin 用于公共按钮样式 */
@mixin action-button-style {
    border-radius: $button-border-radius;
    padding: $button-padding;
    font-size: $button-font-size;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    /* 覆盖 Element Plus 的 primary 按钮样式 */
    &.el-button--primary {
        background-color: $primary-color;
        border-color: $primary-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $color-hover;
            border-color: $color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    &.el-button--info {
        background-color: $info-color;
        border-color: $info-color;
        color: #fff;

        &:hover,
        &:focus {
            background-color: $info-color-hover;
            border-color: $info-color-hover;
            color: #fff;
        }

        &.is-disabled {
            background-color: $color-disabled;
            border-color: $color-disabled;
            color: #fff;
            cursor: not-allowed;
            opacity: 1; // 确保颜色不被 Element Plus 默认的透明度覆盖
        }
    }

    /* 禁用状态下的样式（针对所有类型的按钮） */
    &:disabled,
    &.is-disabled {
        background-color: $color-disabled;
        border-color: $color-disabled;
        color: #fff;
        cursor: not-allowed;
        opacity: 1; // 覆盖 Element Plus 默认的透明度
    }


}

.action-button {
    @include action-button-style;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 10px;
}

.table-button {
    color: #7e63cd;
    font-size: 14px;
    /* 设置你想要的字体大小 */
    font-weight: bold;
    /* 设置字体加粗 */
}


.search-card {
    border-radius: 10px;

    .block {
        padding: 0px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .block:last-child {
        border-right: none;
    }

}


.pagination-container {
    display: flex;
    margin-top: 25px;
    justify-content: right;
    width: 100%;
    z-index: 1000;
}

.el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #868cf4;
    --el-border-radius-base: 8px;
    --el-text-color-primary: #fff;
    --el-segmented-item-hover-bg-color: #b2b5f0;
    display: flex;
    justify-content: flex-start;
    /* 左对齐 */
    width: 300px;
    margin-bottom: 20px;
}

.role-user-list {
    margin-bottom: 12px;
}

.role-group {
    margin-bottom: 8px;
}

.role-group h4 {
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--el-text-color-primary);
}

.user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-tag {
    display: flex;
    align-items: center;
    padding: 2px 8px;
}

.option-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.option-content .user-id {
    margin-left: auto;
    color: var(--el-text-color-secondary);
    font-size: 13px;
}

.selected-user-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.selected-user-info img {
    margin-bottom: 10px;
}

.remark-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    /* 根据需要调整最大宽度 */
}
</style>